import { useIntersectionObserver, useIntervalFn } from '@vueuse/core'
import { ref, onUnmounted } from 'vue'
export function useObserver (apiFn) {
  const target = ref(null)
  // stop是一个可执行方法，调用就会停止监听
  // 不管元素进入还是离开可视区域都不会再执行回调函数
  // 注意：不会监听一次，只有进入视口和离开视口会监听
  const { stop } = useIntersectionObserver(
    // 监听目标元素
    target,
    ([{ isIntersecting }], observerElement) => {
      // isIntersecting 是个布尔值，代表当前监听的元素是否进入视口区域
      if (isIntersecting) {
        /* loadHot() */// 发起网络请求
        stop()// 停止监听
        apiFn()
      }
      // targetIsVisible.value = isIntersecting
    },
    {
      // 一旦进入立刻触发
      threshold: 0
    }
  )
  return {
    target
  }
}
// 核心逻辑：基于一个数据进行自减操作
// useIntervalFn：每隔一秒执行一段足迹的逻辑(数据自减)
// useIntervalFn第一个函数是cb,第二个函数interval，cb代表的是需要每隔一段时间执行函数interval这个时间
// useIntervalFncb,interval,return出了resume,pause 可以自由地开启和暂停要执行的cb逻辑
// 在cb中书写自减逻辑，相当于只要1开始执行resume每个一段时间完成自减
export function useCountDown (time) {
  // 完成倒计时逻辑
  const countTime = ref(0)
  // 开始倒计时函数
  const { resum, pause } = useIntervalFn(() => {
    // 拿到传下来的time然后执行逻辑
    if (countTime.value <= 0) {
      pause()
    }
    countTime.value--
  }, 1000, false)
  onUnmounted(() => {
    pause()
  })
  function start () {
    countTime.value = time
    resum()
  }
  //   // 暂停倒计时函数
  //   function pause () {

  //   }
  return {
    countTime,
    start,
    pause
  }
}
